<template>
	<Echarts :option="option" />
</template>
<script setup>
import Echarts from "@/components/Echarts/index.vue";

const option = ref({
	grid: {
		left: "10%",
		right: "3%",
		top: 60,
		bottom: 40
	},
	title: {
		text: "万kWh",
		left: "10px", // 标题居中
		top: "28px",
		textStyle: {
			color: "#8DA3C1", // 文本颜色
			fontSize: 12 // 字体大小
		}
	},
	tooltip: {
		trigger: "axis",
		backgroundColor: "rgba(0, 0, 0, 0.8)", // 背景色，可以使用透明度
		textStyle: {
			color: "#FFFFFF", // 文字颜色
			fontSize: 14 // 字体大小
		},
		formatter: function (params) {
			// 创建一个与ECharts默认样式匹配的小圆点图标
			let tooltipText = "";
			tooltipText += params[0]?.name + " <br/>";
			params.forEach(function (item) {
				const { seriesName, value, color } = item;
				// console.log("value", value);

				const dot = `<span style="display:inline-block;margin-right:5px;border-radius:10px;
				width:10px;height:10px;background-color:${color};"></span>`;
				tooltipText += `<span style='display:flex;justify-content: space-between;'>
						<span>${dot}${seriesName}:</span>
						<span>${value[1] == "0.00001" ? "--" : (value[1] * 1).toFixed(2)} 万kWh</span>
					 </span>`;
			});
			return tooltipText;
		},
		extraCssText: "border: 1px solid rgba(139,161,191,0.3);padding:16px;"
	},

	legend: {
		right: "16px",
		x: "center", // 图例居中
		top: "10px",
		textStyle: {
			color: "#8DA3C1", // 文本颜色
			fontSize: 13 // 字体大小
		},
		icon: "circle",
		itemWidth: 10,
		itemHeight: 10,
		itemGap: 10
	},

	xAxis: {
		type: "category",

		axisLine: {
			lineStyle: {
				color: "#0C304C" // X轴线的颜色
			}
		},
		axisLabel: {
			fontSize: 12,
			color: "#8DA3C1" // X轴标签颜色
		},
		axisTick: {
			show: false
		}
	},
	yAxis: {
		type: "value",
		boundaryGap: [0, "100%"],

		axisLabel: {
			color: "#8DA3C1", // 文本颜色
			fontSize: 13 // 字体大小
		},
		axisTick: {
			show: false // 隐藏Y轴刻度线（尺子）
		},
		splitLine: {
			show: true,
			lineStyle: {
				color: "rgba(80, 187, 255,0)",
				type: "solid",
				width: 1
			}
		}
	},
	series: [
		{
			name: "理论发电量",
			type: "line",
			showSymbol: false,
			hoverAnimation: false,
			areaStyle: {
				color: {
					type: "linear",
					x: 0,
					y: 0,
					x2: 0,
					y2: 1,
					colorStops: [
						{ offset: 0, color: "rgba(80, 187, 255,0.3)" }, // 上层颜色（透明度较高）
						{ offset: 1, color: "rgba(80, 187, 255,0)" } // 上层颜色（透明度较高）
					]
				}
			},
			data: [
				["06-01", 30],
				["06-02", 15],
				["06-03", 20],
				["06-04", 30],
				["06-05", 70],
				["06-06", 65],
				["06-07", 90]
			]
		},
		{
			name: "上网电量",
			type: "line",
			showSymbol: false,
			hoverAnimation: false,
			areaStyle: {
				color: {
					type: "linear",
					x: 0,
					y: 0,
					x2: 0,
					y2: 1,
					colorStops: [
						{ offset: 0, color: "rgba(66, 191, 84,0.3)" }, // 上层颜色（透明度较高）
						{ offset: 1, color: "rgba(66, 191, 84,0)" } // 上层颜色（透明度较高）
					]
				}
			},
			data: [
				["06-01", 30],
				["06-02", 45],
				["06-03", 40],
				["06-04", 80],
				["06-05", 70],
				["06-06", 65],
				["06-07", 90]
			]
		},
		{
			name: "实际发电量",
			type: "line",
			showSymbol: false,
			hoverAnimation: false,
			areaStyle: {
				color: {
					type: "linear",
					x: 0,
					y: 0,
					x2: 0,
					y2: 1,
					colorStops: [
						{ offset: 0, color: "rgba(241, 136, 12,0.3)" }, // 上层颜色（透明度较高）
						{ offset: 1, color: "rgba(241, 136, 12,0)" } // 上层颜色（透明度较高）
					]
				}
			},
			data: [
				["06-01", 30],
				["06-02", 45],
				["06-03", 80],
				["06-04", 50],
				["06-05", 30],
				["06-06", 65],
				["06-07", 90]
			]
		},
		{
			name: "损失电量",
			type: "line",
			showSymbol: false,
			hoverAnimation: false,
			areaStyle: {
				color: {
					type: "linear",
					x: 0,
					y: 0,
					x2: 0,
					y2: 1,
					colorStops: [
						{ offset: 0, color: "rgba(255, 98, 113,0.3)" }, // 上层颜色（透明度较高）
						{ offset: 1, color: "rgba(255, 98, 113,0)" } // 上层颜色（透明度较高）
					]
				}
			},
			data: [
				["06-01", 90],
				["06-02", 45],
				["06-03", 40],
				["06-04", 50],
				["06-05", 10],
				["06-06", 65],
				["06-07", 20]
			]
		}
	]
});
</script>
